<template>
  <div class="echarts">
    <div :id="id"></div>
  </div>
</template>
   
<script setup>
import * as echarts from 'echarts'
import { ref,watch, onMounted } from 'vue'
import axiosUtil from '@/utils/axios'
import { useStore } from 'vuex'
import router from '@/router'
const store = useStore()



const props = defineProps({
  id: String,
  type: {
    type: String,
    default: 'bar'
  },
  toolbox: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  valueType: {
    type: String,
    default: ''
  },
  tableFrom: {
    type: Object,
    default: () => {}
  }
})

var toolbox = {
  show: true,
  left: 0,
  iconStyle: {
    borderColor: '#fff' // 图标默认颜色
  },
  emphasis: {
    iconStyle: {
      borderColor: '#54C3F1' // 图标hover颜色
    }
  },
  feature: {


    // restore: { show: true, title: '还原' },
    saveAsImage: { show: true, title: '截图下载' },
    magicType: {
      type: ['line', 'bar', 'stack','tiled'],
      title: { bar: '柱状图', line: '折现图', stack: '堆叠', tiled: '平铺' }
    } //此处最新版本echarts可设置三个值（stack-堆叠模式）,可自行查看echarts文档
  }
}


const echartsType = ref(0)
echartsType.value = props.type
echartsType.valueType = props.valueType
echartsType.tableFrom = props.tableFrom
echartsType.title = store.state.leftTreeObj.title
console.log(store.state.analogList)
if (props.tableFrom && props.tableFrom.radio1 && props.tableFrom.select2) {
  console.log(props.tableFrom.radio1)
  console.log(props.tableFrom.select2)
  console.log(store.state.analogList.find(e => e.value == props.tableFrom.radio1).analog.find(e => e.value == props.tableFrom.select2))
  echartsType.codeName = store.state.analogList.find(e => e.value == props.tableFrom.radio1).analog.find(e => e.value == props.tableFrom.select2).codeName.split(',')
} else {
  echartsType.codeName = []
}
echartsType.color = ['#DF3D1D', '#FFC300', '#3B86F6', '#3AFFFD', '#AAA']

const echartsTitle = ref({
  '': {
    title: '每日电量',
    unit: 'kWh'
  },
  mrdl: {
    title: '每日电量',
    unit: 'kWh'
  },
  mrdf: {
    title: '每日电费',
    unit: '元'
  }
})

const getMrdlOp = (data) => {
  return {
    textStyle: {
      fontSize: 16*window.innerWidth/1920,
      color: '#fff'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(23, 51, 55, 1)',
      borderColor: 'rgba(23, 51, 55, 1)',
      textStyle: {
        color: '#fff'
      },
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        // params.color为当前数据项的颜色，params.seriesName为系列名，params.value为当前数据项的值
        let ret = ''
        let totalCountValue = 0
        for (let i in params) {
          totalCountValue = totalCountValue + params[i].value
          ret =
            ret +
            '<br/><span style="display:inline-block;width:8px;height:8px;background-color:' +
            params[i].color +
            ';margin-right:13px;"></span>' +
            params[i].seriesName +
            '：' +
            params[i].value +
            echartsTitle.value[props.title].unit
        }
        ret =
          echartsTitle.value[props.title].title +
          '：' +
          totalCountValue +
          echartsTitle.value[props.title].unit +
          ret
        return ret
      }
    },
    legend: {
      top: '5%',
      left: 900*window.innerWidth/1920,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: data.map((e) => e.date)
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: echartsTitle.value[props.title].unit,
        nameTextStyle: {
          color: 'rgba(252, 248, 248, 0.4)',
          fontSize: 14*window.innerWidth/1920
        },
        splitLine: {
          show: true, // 显示坐标轴分隔线
          lineStyle: {
            type: 'dashed', // 设置分隔线为虚线
            color: '#3CFDFB',
            opacity: 0.3 // 透明度 30%
          }
        }
      }
    ],
    dataZoom: [
      //图标底部的全景伸缩
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100,
        height: 20*window.innerWidth/1920,
        top: '92.7%',
        dataBackgroundColor: 'rgba(60, 253, 251, 0.08)', // 设置数据区域的背景色
        fillerColor: 'rgba(60, 253, 251, 0.08)', // 设置选中区域的颜色
        borderColor: 'rgba(60, 253, 251, 0.08)', // 设置边框颜色
        handleStyle: {
          color: 'rgba(51, 215, 225, 1)',
          borderColor: 'rgba(51, 215, 225, 1)',
          borderCap: 'butt'
        }
      }
    ],
    series: [
      {
        name: '尖时电量',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 18*window.innerWidth/1920,
        itemStyle: {
          color: '#FF3406'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.spireQuantities)
      },
      {
        name: '峰时电量',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#FF8F00'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.peakQuantities)
      },
      {
        name: '平时电量',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#FFDC55'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.flatQuantities)
      },
      {
        name: '谷时电量',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#1DF7BA'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.valleyQuantities)
      },
      {
        name: '深谷电量',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#AAA'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.deepValleyQuantity)
      }
    ]
  }
}
const getMrdfOp = (data) => {
  return {
    textStyle: {
      fontSize: 16*window.innerWidth/1920,
      color: '#fff'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(23, 51, 55, 1)',
      borderColor: 'rgba(23, 51, 55, 1)',
      textStyle: {
        color: '#fff'
      },
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        // params.color为当前数据项的颜色，params.seriesName为系列名，params.value为当前数据项的值
        let ret = ''
        let totalCountValue = 0
        for (let i in params) {
          totalCountValue = totalCountValue + params[i].value
          ret =
            ret +
            '<br/><span style="display:inline-block;width:8px;height:8px;background-color:' +
            params[i].color +
            ';margin-right:13px;"></span>' +
            params[i].seriesName +
            '：' +
            params[i].value +
            echartsTitle.value[props.title].unit
        }
        ret =
          echartsTitle.value[props.title].title +
          '：' +
          totalCountValue +
          echartsTitle.value[props.title].unit +
          ret
        return ret
      }
    },
    legend: {
      top: '5%',
      left: 900*window.innerWidth/1920,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: data.map((e) => e.date)
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: echartsTitle.value[props.title].unit,
        nameTextStyle: {
          color: 'rgba(252, 248, 248, 0.4)',
          fontSize: 14*window.innerWidth/1920
        },
        splitLine: {
          show: true, // 显示坐标轴分隔线
          lineStyle: {
            type: 'dashed', // 设置分隔线为虚线
            color: '#3CFDFB',
            opacity: 0.3 // 透明度 30%
          }
        }
      }
    ],
    dataZoom: [
      //图标底部的全景伸缩
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100,
        height: 20*window.innerWidth/1920,
        top: '92.7%',
        dataBackgroundColor: 'rgba(60, 253, 251, 0.08)', // 设置数据区域的背景色
        fillerColor: 'rgba(60, 253, 251, 0.08)', // 设置选中区域的颜色
        borderColor: 'rgba(60, 253, 251, 0.08)', // 设置边框颜色
        handleStyle: {
          color: 'rgba(51, 215, 225, 1)',
          borderColor: 'rgba(51, 215, 225, 1)',
          borderCap: 'butt'
        }
      }
    ],
    series: [
      {
        name: '尖时电费',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 18*window.innerWidth/1920,
        itemStyle: {
          color: '#FF3406'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.spireCost)
      },
      {
        name: '峰时电费',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#FF8F00'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.peakCost)
      },
      {
        name: '平时电费',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#FFDC55'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.flatCost)
      },
      {
        name: '谷时电费',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#1DF7BA'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.valleyCost)
      },
      {
        name: '深谷电费',
        type: echartsType.value,
        stack: 'Ad',
        barWidth: 36*window.innerWidth/1920,
        itemStyle: {
          color: '#AAA'
        },
        // emphasis: {
        //   focus: 'series'
        // },
        data: data.map((e) => e.deepValleyCost)
      }
    ]
  }
}
const getYdcbkzsOp = (data) => {
  return {
    textStyle: {
      fontSize: 16*window.innerWidth/1920,
      color: '#fff'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: '5%',
      left: 1347*window.innerWidth/1920,
      align: 'left',
      icon: 'circle',
      padding: [0, 0, 0, 0],
      itemGap: 36*window.innerWidth/1920, //示例组件间距
      itemWidth: 14*window.innerWidth/1920, //示例组件图标大小
      itemHeight: 14*window.innerWidth/1920, //示例组件图标大小
      textStyle: {
        color: '#fff',
        fontSize: 14*window.innerWidth/1920
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [
          '01',
          '02',
          '03',
          '04',
          '05',
          '06',
          '07',
          '08',
          '09',
          '10',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
          '20',
          '21',
          '22',
          '23',
          '24',
          '25',
          '26',
          '27',
          '28',
          '29',
          '30',
          '31'
        ]
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true, // 显示坐标轴分隔线
          lineStyle: {
            type: 'dashed', // 设置分隔线为虚线
            color: '#3CFDFB',
            opacity: 0.3 // 透明度 30%
          }
        }
      }
    ],
    dataZoom: [
      //图标底部的全景伸缩
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100,
        height: 20*window.innerWidth/1920,
        top: '92.7%',
        dataBackgroundColor: 'rgba(60, 253, 251, 0.08)', // 设置数据区域的背景色
        fillerColor: 'rgba(60, 253, 251, 0.08)', // 设置选中区域的颜色
        borderColor: 'rgba(60, 253, 251, 0.08)', // 设置边框颜色
        handleStyle: {
          color: 'rgba(51, 215, 225, 1)',
          borderColor: 'rgba(51, 215, 225, 1)',
          borderCap: 'butt'
        }
      }
    ],
    series: [
      {
        name: '本月',
        type: echartsType.value,
        smooth: true, //曲线
        symbolSize: 0,
        barWidth: 36*window.innerWidth/1920,
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#EED61F'
        },
        areaStyle: {
          //阴影区域
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 229, 32, 0.2)'
            },
            {
              offset: 1,
              color: 'rgba(255, 229, 32, 0.1)'
            }
          ])
        },
        data: store.state.devicesDailyQuantityCost.map((e) => {
          if(!e.quantities || !e.pricePingYuan || !e.cost){
            return 0;
          }
          return (e.quantities * e.pricePingYuan / e.cost).toFixed(3)
        })
      },
      {
        name: '上月',
        type: echartsType.value,
        smooth: true, //曲线
        symbolSize: 0,
        barWidth: 36*window.innerWidth/1920,
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#00FFB8'
        },
        areaStyle: {
          //阴影区域
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 255, 184, 0.2)'
            },
            {
              offset: 1,
              color: 'rgba(0, 255, 184, 0.1)'
            }
          ])
        },
        data: !data?[]:data.map((e) => {
          if(!e.quantities || !e.pricePingYuan || !e.cost){
            return 0;
          }
          return (e.quantities * e.pricePingYuan / e.cost).toFixed(3)
        })
      }
    ]
  }
}
const getByqfzlOp = (data) => {
  return {
    textStyle: {
      fontSize: 16*window.innerWidth/1920,
      color: '#fff'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: "{c}%",
    },
    legend: {
      top: '5%',
      left: 1373*window.innerWidth/1920,
      align: 'left',
      icon: 'circle',
      padding: [0, 0, 0, 0],
      itemGap: 36*window.innerWidth/1920, //示例组件间距
      itemWidth: 14*window.innerWidth/1920, //示例组件图标大小
      itemHeight: 14*window.innerWidth/1920, //示例组件图标大小
      textStyle: {
        color: '#fff',
        fontSize: 14*window.innerWidth/1920
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: data[0].dddd.map((e) => new Date(e.tp).toISOString().slice(0, 10))
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true, // 显示坐标轴分隔线
          lineStyle: {
            type: 'dashed', // 设置分隔线为虚线
            color: '#3CFDFB',
            opacity: 0.3 // 透明度 30%
          }
        }
      }
    ],
    dataZoom: [
      //图标底部的全景伸缩
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100,
        height: 20*window.innerWidth/1920,
        top: '92.7%',
        dataBackgroundColor: 'rgba(60, 253, 251, 0.08)', // 设置数据区域的背景色
        fillerColor: 'rgba(60, 253, 251, 0.08)', // 设置选中区域的颜色
        borderColor: 'rgba(60, 253, 251, 0.08)', // 设置边框颜色
        handleStyle: {
          color: 'rgba(51, 215, 225, 1)',
          borderColor: 'rgba(51, 215, 225, 1)',
          borderCap: 'butt'
        }
      }
    ],
    series: [
      {
        name: '变压器负载率',
        type: echartsType.value,
        smooth: true, //曲线
        symbolSize: 0,
        barWidth: 36*window.innerWidth/1920,
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#00FFB8'
        },
        areaStyle: {
          //阴影区域
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 255, 184, 0.2)'
            },
            {
              offset: 1,
              color: 'rgba(0, 255, 184, 0.1)'
            }
          ])
        },

        data: data[0].dddd.map((e) => e.v.toFixed(1))
      }
    ]
  }
}

const getPublicLineOp = (categoryData) => {
  var seriesArray = []
  if(!categoryData||!categoryData.length){
    return
  }
  for (let i in categoryData) {
    //有数据的情况下
    if (categoryData[i]) {

      seriesArray.push({
        name: echartsType.title +" - " +  (echartsType.codeName[i] || ''),
        type: echartsType.value,
        smooth: true, //曲线
        symbolSize: 0,
        itemStyle: {
          color: echartsType.color[i]
        },
        lineStyle: {
          width: 1
        },
        data: categoryData[i].dddd.map((e) => e.v.toFixed(3))
      })
    }
  }
  let option = {
    textStyle: {
      fontSize: 16*window.innerWidth/1920,
      color: '#fff'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: '1.7%',
      left: 150,
      align: 'left',
      icon: 'circle',
      padding: [0, 0, 0, 0],
      itemGap: 20*window.innerWidth/1920, //示例组件间距
      itemWidth: 10*window.innerWidth/1920, //示例组件图标大小
      itemHeight: 10*window.innerWidth/1920, //示例组件图标大小
      textStyle: {
        color: '#fff',
        fontSize: 14*window.innerWidth/1920
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: categoryData[0].dddd.map((e) => new Date(e.tp).toLocaleString())
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true, // 显示坐标轴分隔线
          lineStyle: {
            type: 'dashed', // 设置分隔线为虚线
            color: '#3CFDFB',
            opacity: 0.3 // 透明度 30%
          }
        }
      }
    ],
    dataZoom: [
      //图标底部的全景伸缩
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100,
        height: 20*window.innerWidth/1920,
        top: '92.7%',
        dataBackgroundColor: 'rgba(60, 253, 251, 0.08)', // 设置数据区域的背景色
        fillerColor: 'rgba(60, 253, 251, 0.08)', // 设置选中区域的颜色
        borderColor: 'rgba(60, 253, 251, 0.08)', // 设置边框颜色
        handleStyle: {
          color: 'rgba(51, 215, 225, 1)',
          borderColor: 'rgba(51, 215, 225, 1)',
          borderCap: 'butt'
        }
      }
    ],
    series: seriesArray
  }
  props.toolbox ? (option.toolbox = toolbox) : {}
  return option
}
const dotChart = () => {
  var myChart = echarts.init(document.getElementById(props.id))
  console.log(echartsType.valueType)
  store.state.ddidList = [];
  myChart.clear();
  if (echartsType.valueType == 'mrdl') {
    var option = getMrdlOp(store.state.devicesDailyQuantityCost)
    option.toolbox = toolbox
    option && myChart.setOption(option)
    return
  } else if (echartsType.valueType == 'mrdf') {
    var option = getMrdfOp(store.state.devicesDailyQuantityCost)
    option.toolbox = toolbox
    option && myChart.setOption(option)
    return
  } else if (echartsType.valueType == 'ydcbkzs') {
    var params = {
      month:store.state.totalCount.month,
      devicesId: store.state.leftTreeId,
      isLastMonth: true
    }

    axiosUtil.get("/api/V1/devices/getDailyQuantitiesAndCost/forMy", {params: params}).then(function (json) {
      var option = getYdcbkzsOp(json)
      option.toolbox = toolbox
      option && myChart.setOption(option)
    })
    return
  } else if (echartsType.valueType == 'byqfzl') {//变压器负载率的数据
    var params = {}
    params.timeType = "by";
    params.paramType = "byqfzl";
    params.devicesId = store.state.leftTreeId;
    params.month = store.state.totalCount.month;

    axiosUtil.get("/api/V1/devices/getDetection/forMy", {params: params}).then(function (json) {

      //生成图表
      var option = getByqfzlOp(json)
      option.toolbox = toolbox
      option && myChart.setOption(option)

    })
    return
  }else if (echartsType.valueType == 'zdxl') {//最大需量里面的图表调用
    var params = {}
    params.timeDimension = echartsType.tableFrom.radio2;
    params.devicesId = store.state.leftTreeId;
    params.month = store.state.totalCount.month;

    axiosUtil.get("/api/V1/devices/getMaximum/forMy", {params: params}).then(function (json) {
      var option = getPublicLineOp(json)
      option && myChart.setOption(option)
      //生成详细数据
      var ddidList = [];
      let groupedByDate = {};
      for (let i in json) {

        store.state.ddidListTime = {
          firstDateTime: json[i].firstDateTime,
          lastDateTime: json[i].lastDateTime
        };

        let data = json[i].dddd;

        for (let j in data) {
          if(echartsType.tableFrom.radio2==="y"){//月的汇总算法
            const groupedDate = new Date(data[j].tp).toISOString().slice(0, 7); // 将带有时间的日期转换为标准日期格式
            if (!groupedByDate[groupedDate] || data[j].v > groupedByDate[groupedDate].maxValue) {
              var devicesDetectionInfoDto = {
                dateTime: groupedDate,
                maxValue: data[j].v.toFixed(3),
                maxTime: new Date(data[j].tp).toLocaleString()
              }
              groupedByDate[groupedDate] = devicesDetectionInfoDto;
            }
          }else { //月日的汇总算法
            const groupedDate = new Date(data[j].tp).toISOString().split('T')[0]; // 将带有时间的日期转换为标准日期格式
            if (!groupedByDate[groupedDate] || data[j].v > groupedByDate[groupedDate].maxValue) {
              var devicesDetectionInfoDto = {
                dateTime: groupedDate,
                maxValue: data[j].v.toFixed(3),
                maxTime: new Date(data[j].tp).toLocaleString()
              }
              groupedByDate[groupedDate] = devicesDetectionInfoDto;
            }
          }
        }
        let index = 0
        Object.keys(groupedByDate).forEach(key => {
          ddidList[index] = groupedByDate[key];
          index ++;
        });

      }
      store.state.ddidList = ddidList;
    })
    return
  }

  //实时监控里面的图表调用
  var params = {}
  params.timeType = echartsType.tableFrom.radio2;
  params.paramType = echartsType.tableFrom.select2;
  params.devicesId = store.state.leftTreeId;
  params.month = store.state.totalCount.month;

  axiosUtil.get("/api/V1/devices/getDetection/forMy", {params: params}).then(function (json) {

    //生成图表
    var option = getPublicLineOp(json)
    option && myChart.setOption(option)

    //生成详细数据
    var ddidList = [];

    for (let i in json) {

      var devicesDetectionInfoDto = {
        title: echartsType.title +" - " + (echartsType.codeName[i] || ''),
        realTimeValue: 0,
        maxValue: -99999999999,
        maxTime: '-',
        minValue: 99999999999,
        minTime: '-'
      }
      store.state.ddidListTime = {
        firstDateTime: json[i].firstDateTime,
        lastDateTime: json[i].lastDateTime
      };
      let data = json[i].dddd;
      for (let j in data) {
        if (data[j].v > devicesDetectionInfoDto.maxValue) {
          devicesDetectionInfoDto.maxValue = data[j].v.toFixed(3)
          devicesDetectionInfoDto.maxTime = new Date(data[j].tp).toLocaleString()
        }
        if (data[j].v < devicesDetectionInfoDto.minValue) {
          devicesDetectionInfoDto.minValue = data[j].v.toFixed(3)
          devicesDetectionInfoDto.minTime = new Date(data[j].tp).toLocaleString()
        }
        devicesDetectionInfoDto.realTimeValue = data[j].v.toFixed(3)
      }
      if(data && data.length){
        ddidList[i] = devicesDetectionInfoDto;
      }
    }
    store.state.ddidList = ddidList;

  })




}

watch(() => store.state.devicesDailyQuantityCost, (val) => {
  dotChart()
})

onMounted(() => {
  dotChart()
})
</script>
   
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.echarts {
  height: 100%;
  padding: 0 5px;

  &>div {
    height: 100%;
    width: 100%;

    :deep(canvas) {
      height: 100% !important;
      width: 100% !important;
    }
  }
}

.table_right {
  text-align: right;
  padding: 0 10px 10px 0;
}
</style>